<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PPG指标解析 - S1生理数据分析工具</title>
    
    <!-- Element Plus CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    
    <!-- Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    
    <!-- Element Plus JS -->
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    
    <!-- Element Plus Icons -->
    <script src="https://unpkg.com/@element-plus/icons-vue/dist/index.iife.js"></script>
    
    <!-- Axios for HTTP requests -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    
    <script src="../js/menu-config.js"></script>
    <script src="../js/common-header.js"></script>
    <script src="../js/icons.js"></script>
    <!-- Chart.js -->
    <script src="../js/chart.js"></script>
    
    <!-- 引用外部样式表 -->
    <link rel="stylesheet" href="../css/global.css">
    <link rel="stylesheet" href="../css/analysis-common.css">
    <link rel="stylesheet" href="../css/ppg-analysis.css">
    <!-- 前端Excel导出依赖 -->
    <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
</head>
<body>
    <div id="app" class="layout-container">
        <div id="header-container"></div>
        
        <!-- 主体内容区 -->
        <div class="main-container">
            <!-- 左侧菜单栏 -->
            <aside class="sidebar" :class="{ collapsed: sidebarCollapsed, show: sidebarShow }">
                <div class="sidebar-content">
                    <ul class="nav-menu" id="nav-menu">
                        <!-- 菜单项将通过JavaScript动态生成 -->
                    </ul>
                </div>
            </aside>
            
            <!-- 右侧内容区 -->
            <main class="content-area">
                <!-- 面包屑导航 -->
                <div class="breadcrumb-container">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item><a href="../index.html">首页</a></el-breadcrumb-item>
                        <el-breadcrumb-item>PPG指标解析</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                
                <!-- 页面标题 -->
                <div class="page-header">
                    <h1 class="page-title">PPG指标解析</h1>
                    <p class="page-description">光电容积脉搏波信号分析与心率变异性评估</p>
                </div>

                <!-- 文件管理区域（与EDA一致） -->
                <div class="content-card">
                    <div class="card-header">
                        <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
                            <h2>
                                <el-icon>
                                    <Folder />
                                </el-icon>
                                文件列表 ({{ fileList.length }})
                            </h2>
                            <div style="display: flex; gap: 8px;">
                                <el-button type="primary" size="small" @click="triggerFileUpload" :icon="Upload" :disabled="isAnalyzing">
                                    上传文件
                                </el-button>
                                <el-button size="small" type="danger" :disabled="fileList.length === 0 || isAnalyzing" @click="clearFiles">
                                    清空所有
                                </el-button>
                            </div>
                            <input ref="fileInput" type="file" multiple accept=".txt,.csv,.json" @change="handleFileSelect" style="display: none;">
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- 文件上传区域 -->
                        <div v-if="fileList.length === 0" class="upload-area" :class="{ dragover: isDragOver }" @drop="handleDrop" @dragover.prevent="isDragOver = true" @dragleave="isDragOver = false" @click="triggerFileUpload">
                            <el-icon size="48" color="#c0c4cc"><upload-filled /></el-icon>
                            <div style="margin-top: 16px; font-size: 16px; color: #606266;">
                                将PPG数据文件拖到此处，或<em style="color: #2F54EB;">点击上传</em>
                            </div>
                            <div style="margin-top: 8px; font-size: 14px; color: #909399;">
                                支持 .txt、.csv 和 .json 格式文件，可批量选择
                            </div>
                        </div>

                        <!-- 文件列表表格 -->
                        <div v-if="fileList.length > 0" class="file-list-table">
                            <el-table :data="fileList" style="width: 100%">
                                <el-table-column type="selection" width="55"></el-table-column>
                                <el-table-column prop="name" label="文件名" min-width="200">
                                    <template #default="scope">
                                        <div style="display: flex; align-items: center; gap: 8px;">
                                            <el-tag size="small" :type="getFileTypeColor(scope.row.type)">
                                                {{ scope.row.type?.toUpperCase() || 'TXT' }}
                                            </el-tag>
                                            <el-tooltip :content="scope.row.name" placement="top">
                                                <span>{{ scope.row.name }}</span>
                                            </el-tooltip>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="size" label="文件大小" width="120">
                                    <template #default="scope">
                                        {{ formatFileSize(scope.row.size) }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="status" label="状态" width="150">
                                    <template #default="scope">
                                        <div class="progress-indicator">
                                            <el-tag :type="getStatusType(scope.row.status)" size="small">
                                                {{ getStatusText(scope.row.status) }}
                                            </el-tag>
                                            <el-progress v-if="scope.row.status === 'analyzing'" :percentage="scope.row.progress || 0" :show-text="false" class="analysis-progress"></el-progress>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="100">
                                    <template #default="scope">
                                        <el-button type="danger" size="small" :icon="Delete" @click="removeFile(scope.$index)" :disabled="isAnalyzing"></el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                
                <!-- 双卡片并排区域：分析控制与日志 -->
                <div class="cards-row">
                    <!-- 分析控制面板 -->
                    <div class="card-half">
                        <div class="content-card">
                            <el-card>
                                <template #header>
                                    <div style="display: flex; justify-content: space-between; align-items: center;">
                                        <span>分析控制</span>
                                        <el-icon><Setting /></el-icon>
                                    </div>
                                </template>

                                <div class="analysis-control-panel">
                                    <!-- 开始分析按钮 -->
                                    <div class="control-section">
                                        <div class="start-analysis-section">
                                            <div style="display: flex; gap: 8px; justify-content: center;">
                                                <el-button type="primary" size="large" @click="startBatchAnalysis" 
                                                    :loading="isAnalyzing" :disabled="fileList.length === 0 || isAnalyzing"
                                                    :icon="VideoPlay">
                                                    {{ isAnalyzing ? '分析中...' : '开始分析' }}
                                                </el-button>
                                            </div>
                                            <div style="margin-top: 8px; font-size: 12px; color: #909399; text-align: center;">
                                                {{ fileList.length > 0 ? `准备分析 ${fileList.length} 个文件` : '请先上传文件' }}
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 采样率设置 -->
                                    <div class="control-section">
                                        <label class="control-label">采样率设置</label>
                                        <el-select v-model="samplingRate" placeholder="选择采样率" style="width: 100%;">
                                            <el-option label="25 Hz (推荐)" :value="25"></el-option>
                                            <el-option label="32 Hz" :value="32"></el-option>
                                            <el-option label="64 Hz" :value="64"></el-option>
                                            <el-option label="128 Hz" :value="128"></el-option>
                                        </el-select>
                                        <div style="margin-top: 4px; font-size: 12px; color: #909399;">
                                            当前设置: {{ samplingRate }} Hz (默认: 25 Hz)
                                        </div>
                                    </div>

                                    <!-- PPG算法选择 -->
                                    <div class="control-section">
                                        <label class="control-label">PPG算法选择</label>
                                        <div class="algorithm-container">
                                            <el-radio-group v-model="ppgAlgorithm" class="algorithm-radio-group">
                                                <el-radio label="custom" class="algorithm-radio">
                                                    <div class="algorithm-option">
                                                        <div class="algorithm-name">
                                                            Custom算法 (默认)
                                                            <i class="el-icon-question algorithm-help-icon" 
                                                               title="团队改进的PPG处理算法，适合常规心率与质量评估"></i>
                                                        </div>
                                                    </div>
                                                </el-radio>
                                                <el-radio label="neurokit2" class="algorithm-radio">
                                                    <div class="algorithm-option">
                                                        <div class="algorithm-name">
                                                            NeuroKit2
                                                            <i class="el-icon-question algorithm-help-icon" 
                                                               title="基于NeuroKit2库的标准PPG处理方法"></i>
                                                        </div>
                                                    </div>
                                                </el-radio>
                                            </el-radio-group>
                                        </div>
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </div>

                    <!-- 分析日志面板 -->
                    <div class="card-half">
                        <div class="content-card">
                            <el-card>
                                <template #header>
                                    <div style="display: flex; justify-content: space-between; align-items: center;">
                                        <span>分析日志</span>
                                        <div>
                                            <el-button size="small" @click="clearLogs" :disabled="analysisLogs.length === 0">
                                                清空日志
                                            </el-button>
                                        </div>
                                    </div>
                                </template>

                                <div style="flex: 1; display: flex; flex-direction: column;">
                                    <div class="log-content" ref="logContainer">
                                        <div v-if="analysisLogs.length === 0"
                                            style="color: #909399; text-align: center; padding: 20px;">
                                            等待分析...
                                        </div>
                                        <div v-for="(log, index) in analysisLogs" :key="index" class="log-entry"
                                            :class="getLogClass(log.type)">
                                            [{{ log.timestamp }}] {{ log.message }}
                                        </div>
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </div>
                </div>

                <!-- 结果展示区域（与EDA一致的工具栏与导出下拉） -->
                <!-- 结果展示区域 -->
                <div v-if="analysisResults.length > 0" class="results-section">
                    <el-card>
                        <template #header>
                            <div class="results-toolbar">
                                <span>分析结果 ({{ analysisResults.length }} 个文件)</span>
                                <div class="export-options">
                                    <div class="column-manager">
                                        <el-button size="small" :icon="Setting" @click="showColumnManager = true">列管理</el-button>
                                    </div>
                                    <el-dropdown @command="exportResults">
                                        <el-button size="small">
                                            导出结果
                                            <el-icon style="margin-left: 4px"><ArrowDown /></el-icon>
                                        </el-button>
                                        <template #dropdown>
                                            <el-dropdown-menu>
                                                <el-dropdown-item command="csv">导出CSV</el-dropdown-item>
                                            </el-dropdown-menu>
                                        </template>
                                    </el-dropdown>
                                </div>
                            </div>
                        </template>

                        <el-table :data="analysisResults" style="width:100%" @sort-change="handleSortChange">
                            <!-- 基本信息 -->
                            <el-table-column v-if="visibleColumns.filename" prop="filename" label="文件名" min-width="120" sortable="custom" >
                                <template #default="scope">
                                    {{ scope.row.filename }}
                                </template>
                            </el-table-column>
                            <el-table-column v-if="visibleColumns.data_points" prop="data_points" label="数据点数" width="120">
                                <template #default="scope">
                                    {{ formatNumber(scope.row.data_points) }}
                                </template>
                            </el-table-column>
                            <el-table-column v-if="visibleColumns.duration_min" prop="duration_min" label="记录时长(分钟)" width="140">
                                <template #default="scope">
                                    {{ formatDuration(scope.row.duration_min) }}
                                </template>
                            </el-table-column>
                            
                            <!-- 心率指标 -->
                            <el-table-column v-if="visibleColumns.peak_count" prop="peak_count" label="峰值数量" width="120">
                                <template #default="scope">
                                    {{ formatNumber(scope.row.peak_count) }}
                                </template>
                            </el-table-column>
                            <el-table-column v-if="visibleColumns.mean_hr_bpm" prop="mean_hr_bpm" label="平均心率(BPM)" width="140">
                                <template #default="scope">
                                    {{ formatNumber(scope.row.mean_hr_bpm, 1) }}
                                </template>
                            </el-table-column>
                            <el-table-column v-if="visibleColumns.dominant_freq_hz" prop="dominant_freq_hz" label="主频率(Hz)" width="120">
                                <template #default="scope">
                                    {{ formatNumber(scope.row.dominant_freq_hz, 3) }}
                                </template>
                            </el-table-column>
                            <el-table-column v-if="visibleColumns.dominant_freq_hr_bpm" prop="dominant_freq_hr_bpm" label="主频率心率(BPM)" width="160">
                                <template #default="scope">
                                    {{ formatNumber(scope.row.dominant_freq_hr_bpm, 1) }}
                                </template>
                            </el-table-column>
                            <el-table-column v-if="visibleColumns.hr_band_power_ratio" prop="hr_band_power_ratio" label="心率频段功率比(%)" width="160">
                                <template #default="scope">
                                    {{ formatPercentage(scope.row.hr_band_power_ratio) }}
                                </template>
                            </el-table-column>
                            
                            <!-- 信号质量 -->
                            <el-table-column v-if="visibleColumns.signal_quality_score" prop="signal_quality_score" label="信号质量评分" width="140">
                                <template #default="scope">
                                    {{ formatNumber(scope.row.signal_quality_score, 2) }}
                                </template>
                            </el-table-column>
                            <el-table-column v-if="visibleColumns.snr_db" prop="snr_db" label="信噪比(dB)" width="120">
                                <template #default="scope">
                                    {{ formatNumber(scope.row.snr_db, 2) }}
                                </template>
                            </el-table-column>
                            
                            <!-- HRV时域指标 -->
                            <el-table-column v-if="visibleColumns.mean_nn_ms" prop="mean_nn_ms" label="MeanNN(ms)" width="120">
                                <template #default="scope">
                                    {{ formatNumber(scope.row.mean_nn_ms, 1) }}
                                </template>
                            </el-table-column>
                            <el-table-column v-if="visibleColumns.sdnn_ms" prop="sdnn_ms" label="SDNN(ms)" width="120">
                                <template #default="scope">
                                    {{ formatNumber(scope.row.sdnn_ms, 1) }}
                                </template>
                            </el-table-column>
                            <el-table-column v-if="visibleColumns.rmssd_ms" prop="rmssd_ms" label="RMSSD(ms)" width="120">
                                <template #default="scope">
                                    {{ formatNumber(scope.row.rmssd_ms, 1) }}
                                </template>
                            </el-table-column>
                            <el-table-column v-if="visibleColumns.pnn50_percent" prop="pnn50_percent" label="pNN50(%)" width="120">
                                <template #default="scope">
                                    {{ formatPercentage(scope.row.pnn50_percent) }}
                                </template>
                            </el-table-column>
                            <el-table-column v-if="visibleColumns.pnn20_percent" prop="pnn20_percent" label="pNN20(%)" width="120">
                                <template #default="scope">
                                    {{ formatPercentage(scope.row.pnn20_percent) }}
                                </template>
                            </el-table-column>
                            <el-table-column v-if="visibleColumns.triangular_index" prop="triangular_index" label="三角指数" width="120">
                                <template #default="scope">
                                    {{ formatNumber(scope.row.triangular_index, 2) }}
                                </template>
                            </el-table-column>
                            
                            <!-- HRV频域指标 -->
                            <el-table-column v-if="visibleColumns.vlf_power_ms2" prop="vlf_power_ms2" label="VLF功率(ms²)" width="140">
                                <template #default="scope">
                                    {{ formatNumber(scope.row.vlf_power_ms2, 1) }}
                                </template>
                            </el-table-column>
                            <el-table-column v-if="visibleColumns.lf_power_ms2" prop="lf_power_ms2" label="LF功率(ms²)" width="140">
                                <template #default="scope">
                                    {{ formatNumber(scope.row.lf_power_ms2, 1) }}
                                </template>
                            </el-table-column>
                            <el-table-column v-if="visibleColumns.hf_power_ms2" prop="hf_power_ms2" label="HF功率(ms²)" width="140">
                                <template #default="scope">
                                    {{ formatNumber(scope.row.hf_power_ms2, 1) }}
                                </template>
                            </el-table-column>
                            <el-table-column v-if="visibleColumns.total_power_ms2" prop="total_power_ms2" label="总功率(ms²)" width="140">
                                <template #default="scope">
                                    {{ formatNumber(scope.row.total_power_ms2, 1) }}
                                </template>
                            </el-table-column>
                            <el-table-column v-if="visibleColumns.lf_nu" prop="lf_nu" label="LF标准化单位" width="140">
                                <template #default="scope">
                                    {{ formatNumber(scope.row.lf_nu, 2) }}
                                </template>
                            </el-table-column>
                            <el-table-column v-if="visibleColumns.hf_nu" prop="hf_nu" label="HF标准化单位" width="140">
                                <template #default="scope">
                                    {{ formatNumber(scope.row.hf_nu, 2) }}
                                </template>
                            </el-table-column>
                            <el-table-column v-if="visibleColumns.lf_hf_ratio" prop="lf_hf_ratio" label="LF/HF比值" width="120">
                                <template #default="scope">
                                    {{ formatNumber(scope.row.lf_hf_ratio, 2) }}
                                </template>
                            </el-table-column>
                        </el-table>

                        <!-- 列管理对话框 -->
                        <el-dialog v-model="showColumnManager" title="列显示管理" width="500px">
                            <div class="column-manager-content">
                                <!-- 分组：基本信息 -->
                                <div class="column-category">
                                    <el-checkbox 
                                        :indeterminate="isCategoryIndeterminate('basic')" 
                                        v-model="categorySelection.basic" 
                                        @change="toggleCategoryColumns('basic')">
                                        基本信息
                                    </el-checkbox>
                                    <div class="column-items">
                                        <el-checkbox v-model="visibleColumns.filename">文件名</el-checkbox>
                                        <el-checkbox v-model="visibleColumns.data_points">数据点数</el-checkbox>
                                        <el-checkbox v-model="visibleColumns.duration_min">记录时长</el-checkbox>
                                    </div>
                                </div>
                                
                                <!-- 分组：心率指标 -->
                                <div class="column-category">
                                    <el-checkbox 
                                        :indeterminate="isCategoryIndeterminate('hr')" 
                                        v-model="categorySelection.hr" 
                                        @change="toggleCategoryColumns('hr')">
                                        心率指标
                                    </el-checkbox>
                                    <div class="column-items">
                                        <el-checkbox v-model="visibleColumns.peak_count">峰值数量</el-checkbox>
                                        <el-checkbox v-model="visibleColumns.mean_hr_bpm">平均心率</el-checkbox>
                                        <el-checkbox v-model="visibleColumns.dominant_freq_hz">主频率</el-checkbox>
                                        <el-checkbox v-model="visibleColumns.dominant_freq_hr_bpm">主频率心率</el-checkbox>
                                        <el-checkbox v-model="visibleColumns.hr_band_power_ratio">心率频段功率比</el-checkbox>
                                    </div>
                                </div>
                                
                                <!-- 分组：信号质量 -->
                                <div class="column-category">
                                    <el-checkbox 
                                        :indeterminate="isCategoryIndeterminate('quality')" 
                                        v-model="categorySelection.quality" 
                                        @change="toggleCategoryColumns('quality')">
                                        信号质量
                                    </el-checkbox>
                                    <div class="column-items">
                                        <el-checkbox v-model="visibleColumns.signal_quality_score">信号质量评分</el-checkbox>
                                        <el-checkbox v-model="visibleColumns.snr_db">信噪比</el-checkbox>
                                    </div>
                                </div>
                                
                                <!-- 分组：HRV时域指标 -->
                                <div class="column-category">
                                    <el-checkbox 
                                        :indeterminate="isCategoryIndeterminate('hrv_time')" 
                                        v-model="categorySelection.hrv_time" 
                                        @change="toggleCategoryColumns('hrv_time')">
                                        HRV时域指标
                                    </el-checkbox>
                                    <div class="column-items">
                                        <el-checkbox v-model="visibleColumns.mean_nn_ms">MeanNN</el-checkbox>
                                        <el-checkbox v-model="visibleColumns.sdnn_ms">SDNN</el-checkbox>
                                        <el-checkbox v-model="visibleColumns.rmssd_ms">RMSSD</el-checkbox>
                                        <el-checkbox v-model="visibleColumns.pnn50_percent">pNN50</el-checkbox>
                                        <el-checkbox v-model="visibleColumns.pnn20_percent">pNN20</el-checkbox>
                                        <el-checkbox v-model="visibleColumns.triangular_index">三角指数</el-checkbox>
                                    </div>
                                </div>
                                
                                <!-- 分组：HRV频域指标 -->
                                <div class="column-category">
                                    <el-checkbox 
                                        :indeterminate="isCategoryIndeterminate('hrv_freq')" 
                                        v-model="categorySelection.hrv_freq" 
                                        @change="toggleCategoryColumns('hrv_freq')">
                                        HRV频域指标
                                    </el-checkbox>
                                    <div class="column-items">
                                        <el-checkbox v-model="visibleColumns.vlf_power_ms2">VLF功率</el-checkbox>
                                        <el-checkbox v-model="visibleColumns.lf_power_ms2">LF功率</el-checkbox>
                                        <el-checkbox v-model="visibleColumns.hf_power_ms2">HF功率</el-checkbox>
                                        <el-checkbox v-model="visibleColumns.total_power_ms2">总功率</el-checkbox>
                                        <el-checkbox v-model="visibleColumns.lf_nu">LF标准化单位</el-checkbox>
                                        <el-checkbox v-model="visibleColumns.hf_nu">HF标准化单位</el-checkbox>
                                        <el-checkbox v-model="visibleColumns.lf_hf_ratio">LF/HF比值</el-checkbox>
                                    </div>
                                </div>
                            </div>
                            <template #footer>
                                <span class="dialog-footer">
                                    <el-button @click="resetColumns">重置默认</el-button>
                                    <el-button @click="showColumnManager = false">取消</el-button>
                                    <el-button type="primary" @click="applyColumnSettings">确定</el-button>
                                </span>
                            </template>
                        </el-dialog>
                    </el-card>
                </div>
                
                <!-- 错误信息 -->
                <el-alert
                    v-if="errorMessage"
                    :title="errorMessage"
                    type="error"
                    :closable="false"
                    style="margin-top: 20px;">
                </el-alert>
            </main>
        </div>
    </div>

    <!-- 引入PPG分析页面的JavaScript文件 -->
    <script src="../js/ppg-analysis.js"></script>
</body>
</html>